<template>
  <div class="energy-table">
    <div class="table-title">
      <h2>{{energyData.Year}}年{{energyData.Month}}月临安区公共机构能源消耗申报表</h2>
    </div>
    <div class="table-content">
      <div class="table-select">
        <div class="table-selectItem">
          <label>填报单位：</label>
          <select style="max-width: 280px;" v-model="energyData.DepartmentName" @change="doSearch()">
            <option :key="i" v-for="(item,i) in departments" :value="item">{{item}}</option>
          </select>
        </div>
        <div class="table-selectItem">
          <div class="table-selectItem">
            <label>时间：</label>
            <select style="width:70px;" v-model="energyData.Year" @change="doSearch()">
              <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
            </select> 年
            <select style="width:70px;" v-model="energyData.Month" @change="doSearch()">
              <option :key="n" v-for="n in 12" :value="n">{{n}}</option>
            </select> 月
          </div>
        </div>
        <div class="table-selectItem">
          <label>制表：</label>
          <input type="text" class="tableSelect-input" v-model="energyData.OfficeAddress">
        </div>
      </div>
      <table width="100%" border="1" cellpadding="10">
        <tr>
          <td align="center" valign="middle" width="100px;">能源种类</td>
          <td align="center" valign="middle">单位</td>
          <td align="center" valign="middle">数量</td>
          <td align="center" valign="middle">备注</td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">电</td>
          <td>耗电量(千瓦时)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Electricity.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Electricity.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Electricity.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">水</td>
          <td>用水量(吨)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Water.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Water.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Water.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">汽油</td>
          <td>用量(升)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Gasoline.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Gasoline.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Gasoline.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">柴油</td>
          <td>用量(升)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Diesel.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Diesel.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Diesel.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">燃气</td>
          <td>用量(立方米)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Gas.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Gas.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Gas.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">燃煤</td>
          <td>用量(吨)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Coal.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Coal.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Coal.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">充电桩</td>
          <td>数量(个)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.ChargingPile.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.ChargingPile.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.ChargingPile.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">可再生能源</td>
          <td>用量</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Renewable.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Renewable.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Renewable.Amount"></td>
        </tr>
        <tr>
          <td rowspan='2' align="center" valign="middle">其他能源消耗</td>
          <td>用量</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Other.Total"></td>
          <td align="center" valign="middle" rowspan='2'>
            <textarea v-model="energyData.Other.Remark"></textarea>
          </td>
        </tr>
        <tr>
          <td>金额(元)</td>
          <td align="center" valign="middle"><input type="text" v-model="energyData.Other.Amount"></td>
        </tr>
      </table>
      <div class="table-button">
        <input type="button" value="保存" @click="submitEnergy" v-if="energyData.State!=1">
        <input type="button" value="打印" @click="prints()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [],
      selectYear: [],
      departName: '',
      officeAddress: '',
      year: '',
      month: '',
      energyData: {
        Electricity: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Water: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Gasoline: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Diesel: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Gas: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Coal: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        ChargingPile: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Renewable: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        Other: {
          Amount: 0,
          Total: 0,
          Remark: ""
        },
        DepartmentName: "",
        Year: new Date().getFullYear(),
        Month: new Date().getMonth() + 1,
        OfficeAddress: "",
        State: 0
      }
    }
  },
  methods: {
    async getDepartments() {
      const result = await this.$get("/api/user/departments");
      this.departments = result
      this.energyData.DepartmentName = result[0];
      this.doSearch()
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        alert('您没有安装打印机，请安装后继续!')
      }
    },
    async submitEnergy() {
      console.log(this.energyData)
      try {
        const result = await this.$post("/api/InstituionEnergy", this.energyData)
        alert('操作成功')
      } catch (error) {
        alert(error.message)
      }
    },
    async doSearch() {
      this.departName = this.energyData.DepartmentName
      this.year = this.energyData.Year
      this.month = this.energyData.Month
      const result = await this.$get("/api/InstituionEnergy", {
        departmentName: this.energyData.DepartmentName,
        year: this.energyData.Year,
        month: this.energyData.Month
      })
      if (result) {
        this.energyData = result
      } else {
        this.energyData = {
          Electricity: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Water: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Gasoline: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Diesel: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Gas: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Coal: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          ChargingPile: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Renewable: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          Other: {
            Amount: 0,
            Total: 0,
            Remark: ""
          },
          OfficeAddress: "",
          State: 0
        }
        this.energyData.DepartmentName = this.departName
        this.energyData.Year = this.year
        this.energyData.Month = this.month
      }
    }
  },
  created() {
    var num = new Date().getFullYear();
    for (var i = num - 13; i < num + 1; i++) {
      this.selectYear.unshift(i);
    }
    this.getDepartments()
  }
}
</script>

<style lang="scss" scoped>
.energy-table {
  padding: 25px 0;
}

.table-title {
  height: auto;
  margin-bottom: 25px;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    font-size: 16px;
  }
  span {
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
}

.table-content {
  height: auto;
  .table-select {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
    .table-selectItem {
      select,
      input {
        height: 24px;
      }
      input.tableSelect-input {
        border: none;
        outline: none;
        border-bottom: 1px solid rgb(169, 169, 169);
        width: 280px;
      }
    }
  }
  table {
    td {
      padding: 5px 5px;
      input[type=text] {
        border-radius: 5px;
        border: 1px solid rgb(169, 169, 169);
        outline: none;
        padding-left: 5px;
        height: 24px;
        width: 220px;
      }
      textarea {
        width: 100%;
        resize: none;
        height: 50px;
        padding: 0 5px;
        outline: none;
        border: 1px solid rgb(169, 169, 169);
        border-radius: 5px;
      }
    }
  }
  .table-button {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    input {
      width: 60px;
      margin-left: 25px;
    }
  }
}
</style>
